<template>
  <div>
    <div
      class="feedback"
      v-if="showis"
    >
      <div class="fe_box">
        <textarea
          name=""
          style="resize:none"
          placeholder="您的意见是我们进步的动力！"
          v-model="input"
        ></textarea>
      </div>
      <div
        class="submit"
        @click="submit"
      >提交</div>
      <div
        class="fb_success"
        v-show="fb_model"
      >
        <span>提交成功,感谢反馈</span>
      </div>
    </div>
    <div
      @click="whoareyou"
      class="fankui"
    >反馈</div>
    <div
      class="tishi"
      v-if="listarr.length === 0"
    >请点击下方按钮进行反馈</div>
    <div
      v-else
      class="scroll-box"
      ref="wrapper"
    >
      <div>
        <div
          v-for="(item,index) in listarr"
          :key="index"
          class="ziduan"
          @click="alltext(item)"
        >
          <div>{{item.content}}</div>
          <div v-if="!item.admin_content">未回复</div>
          <div
            style="color:#DA4131"
            v-if="item.admin_content"
          >已回复</div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import { proposal, proposalList } from '@/api/center'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      showis: false,
      fb_model: false,
      input: '',
      listarr: '',
      page: 1
    }
  },
  created () {
    this.getproposalList()
  },
  methods: {
    initScroll () {
      this.$nextTick(() => {
        let _this = this
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true,
          scrollY: true,
          scrollX: false,
          tap: true,
          bounce: false,
          probeType: 3,
          pullUpLoad: {
            threshold: 10
          }
        })
        // 上拉加载
        this.scroll.on('pullingUp', function () {
          _this.getproposalList()
          _this.scroll.finishPullUp()
          _this.scroll.refresh()
        })
      })
    },
    alltext (item) {
      this.$router.push({
        path: '/co_Feedbackitem',
        query: {
          proposal_id: item.proposal_id
        }
      })
    },
    getproposalList () {
      let request = {
        app_id: this.$store.state.app_id,
        user_id: this.$store.state.member_id,
        page: this.page,
        pageshow: 20
      }
      proposalList(request).then(res => {
        let { data, code } = res.data
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (code === 200) {
          this.listarr = [...this.listarr, ...data]
          if (this.page === 1 && this.listarr.length > 0) {
            this.initScroll()
          }
          this.page++
        }
      })
    },
    whoareyou () {
      this.showis = !this.showis
    },
    submit () {
      if (this.input === '') {
        this.$vux.alert.show({
          title: '提示',
          content: '请填写意见',
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
            console.log('Plugin: I\'m hiding now')
          }
        })
      } else {
        let request = {
          app_id: this.$store.state.app_id,
          user_id: this.$store.state.member_id,
          content: this.input
        }
        // axios.post('http://web.zhiyunzaixian.com/Chat/chat/proposal',
        proposal(request).then(res => {
          let { data, code, msg } = res.data
          if (code === 200) {
            this.input = ''
            this.fb_model = true
            this.fb_click()
            this.page = 1
            this.listarr = []
          } else {
            let that = this
            this.$vux.alert.show({
              title: '提示',
              content: msg,
              onShow () {
                that.showis = false
                that.input = ''
              },
              onHide () {
                console.log('Plugin: I\'m hiding now')
              }
            })
          }
        })
      }
    },
    fb_click () {
      var _this = this
      setTimeout(function () {
        _this.fb_model = false
        _this.getproposalList()
        _this.showis = false
      }, 1000)
    }

  }
}
</script>

<style scoped>
.scroll-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(100vw * 120 / 750);
  overflow: hidden;
}
.ziduan {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 0 calc(100vw * 30 / 750);
  box-sizing: border-box;
  height: calc(100vw * 104 / 750);
  line-height: calc(100vw * 104 / 750);
  font-family: PingFangSC-Regular;
  color: #333333;
  text-align: left;
  border-bottom: solid 1px #eee;
}
.ziduan div:first-of-type {
  flex: 1;
  text-align: left;
  font-size: 17px;
  color: #1a1a1a;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.ziduan div:last-of-type {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999999;
  margin-left: calc(100vw * 27 / 750);
}
.submit {
  background: #da4131;
  border-radius: calc(100vw * 46 / 750);
  height: calc(100vw * 76 / 750);
  width: calc(100vw * 686 / 750);
  margin: 0 auto;
  text-align: center;
  margin-top: calc(100vw * 60 / 750);
  color: #fff;
  line-height: calc(100vw * 76 / 750);
  font-size: calc(100vw * 32 / 750);
}
.fankui {
  height: calc(100vw * 76 / 750);
  width: calc(100vw * 460 / 750);
  line-height: calc(100vw * 76 / 750);
  border-radius: calc(100vw * 48 / 750);
  background: #da4131;
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 36 / 750);
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: calc(100vw * 12 / 750);
  left: 50%;
  transform: translate(-50%, 0);
}
.tishi {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #999999;
  letter-spacing: 0;
  width: 100%;
  height: 100vh;
  line-height: 90vh;
  text-align: center;
}
.fe_box {
  height: calc(100vw * 600 / 750);
}
.fe_box > textarea {
  width: 90%;
  height: 90%;
  margin: 5%;
  padding: 11px;
  outline: none;
  border-radius: 8px;
  font-size: 14px;
  border: none;
  background: #f7f7f7;
}
.fe_box > ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
  font-size: calc(100vw * 28 / 750);
}
.feedback {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: #fff;
}
.feedback > button {
  width: 90%;
  margin: 25px 5%;
  background: #f29911;
  outline: none;
  border: none;
  color: white;
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
}

.fb_success {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: calc(100vh - 50px);
  overflow: hidden;
  text-align: center;
}
.fb_success > span {
  padding: 15px 13px;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  margin-top: 40vh;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
}
</style>
